<style>
    .order-item{margin:20px 0 0 0;border: 1px solid #bfbfbf;padding:10px;}
    .order-img-p{font-size: 0;}
    .order-img-p:before{content: "";display: inline-block;height: 100%;vertical-align: middle;text-align: center;}
    .order-img{max-width: 100px;max-height: 100px;}
    .order-info{}
    .order-title{padding:0 0 20px 0;}
    .order-style{padding:0 0 20px 0;}
    .order-price-p{}
    .order-price{padding: 0 0 20px 0;;}
    .order-num{padding: 0 0 20px 0;;}
    .order-status{padding: 0 0 20px 0;}
</style>
<div id="orderApp">
    <h1 class="page-header">订单管理</h1>

<!--<h2 class="sub-header">Section title</h2>-->

    <div class="form-horizontal row" style="margin: 30px 0;">
        <label class="col-sm-1 control-label">时间范围</label>
        <div class="col-sm-4">
            <input v-model.trim="query.beginTime" type="date" class="form-control" style="display: inline-block;width: 200px;" />
            <input v-model.trim="query.endTime" type="date" class="form-control"  style="display: inline-block;width: 200px;"/>
        </div>


        <label class="col-sm-1 control-label">状态</label>
        <div class="col-sm-2">
            <select v-model.trim="query.status" type="text" class="form-control">
                <option value="">请选择</option>
                <option value="0">未付款</option>
                <option value="1">已付款</option>

            </select>
        </div>
        <div class="col-sm-1">
            <div @click="getOrderList(1)" class="btn btn-primary" >查询</div>
        </div>
    </div>
    <div v-for="order in orderList" class="order-item row">
        <div class="order-img-p col-sm-2">
            <img v-if="order.style == null" :src="'/image/' + order.product.cover" class="order-img"  />
            <img v-if="order.style != null" :src="'/image/' + order.style.cover" class="order-img"  />
        </div>
        <div class="order-info col-sm-2">
            <div class="order-title">{{order.product.name}}</div>
            <div v-if="order.style != null" class="order-style">款式：{{order.style.name}}</div>
            <div v-if="order.size != null" class="order-style">尺码：{{order.size.name}}</div>
        </div>
        <div class="order-price-p col-sm-2">
            <div class="order-price">单价￥{{order.product.price}}</div>
            <div class="order-num">数量：{{order.num}}</div>
        </div>
        <div class="order-price-p col-sm-2">
            <div class="order-price">总价￥{{order.product.price * order.num}}</div>

        </div>
        <div class="order-status col-sm-2">
            <div class="order-price text-primary" v-if="order.status == 1">已付款</div>
            <div class="order-price text-danger" v-if="order.status == 0">未付款</div>
            <div class="order-price">{{order.createTime | date}}</div>
        </div>
        <div class="order-status col-sm-2">
            <div @click="del(order.id)" class="btn btn-danger">删除</div>
        </div>
    </div>

    <div v-if="orderList.length == 0">无数据</div>
    <nav  v-if="orderList.length != 0" aria-label="Page navigation">
        <ul class="pagination pagination-lg">
            <li :class="{disabled :  pageNum == 1}" @click="getOrderList(pageNum - 1)">
                <a   aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li v-for="p in page" :class="{active : p == pageNum}" @click="getOrderList(p)"><a >{{p}}</a></li>

            <li :class="{disabled :  pageNum == page[page.length-1]}" @click="getOrderList(pageNum + 1)">
                <a  aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</div>